<template>
    <div>
        <div v-if="!mycourseList.length" class="orders-null">
            <span>
            <img src="../../images/meiyoudingdan.png">
            </span>
            <span class="orders-null-text">暂时没有课程信息</span>
        </div>
        <div class="mycourseList">
            <div class="courselist" v-for='(item,index) in mycourseList' :key="index+'mycourseList'">
                <div class="list_nr">
                    <div class="coursetitle">
                        <div class="coursecaption" v-if="item.activityName!=undefined">{{item.activityName}}</div>
                        <div class="coursecaption" v-else>{{item.coursename}}</div>
                        <div class="coursestate" v-if="item.status !='4' && item.status != '5'">
                            <div :class="skin[item.status]">{{item.statusKey}}</div>
                        </div>
                    </div>
                    <div class="souscourse"><span>所属套餐：</span>{{item.packname}}</div>
                    <div class="myClassName" v-if="item.formalClassName!=undefined"><span>我的班级：</span>{{item.formalClassName}}</div>
                    <div class="courseinfo">
                        <div v-if="item.activityName!=undefined" class="regtime"><span>课程时间：</span><span class="rightjl">{{item.selTimeBegin | formatDate}}</span>{{item.selTimeBegin | formatTimechange}} - {{item.selTimeEnd | formatTimechange}}</div>
                        <div v-else>
                        <div class="regtime" v-if="item.status=='0'"><span>报名时间：</span>{{item.packsigntime | formatDate}}</div>
                        <div class="regtime" v-else-if="item.status=='1' || item.status=='2'"><span>报名时间：</span>{{item.signtime | formatDate}}</div>
                        <!-- <div class="regtime" v-else-if="item.status=='7'"></div> -->
                        <div class="regtime" v-else><span>课程时间：</span>{{item.begintime || item.selTimeBegin | formatDate}} 至 {{item.endtime || item.selTimeEnd | formatDate}}</div>
                        </div>
                        <div class="lector" v-if='item.activityName==undefined && item.teachname!=null'><span>讲师：</span>{{item.teachname}}</div>
                        <div class="teacher" v-if='item.activityName==undefined && item.customname!=null'><span>班主任：</span>{{item.customname}}</div>
                        <div class="teacher" v-if='item.activityName!=undefined'><span>活动创建人：</span>{{item.employeeName}}</div>
                    </div>
                    <div class="checkCc" v-if="item.status=='7' && item.activityName==undefined" @click="checkZhengshu(item.formalclassid)"><a>查看结课证书</a></div>
                    <div class="checkCc" v-else-if="item.activityName!=undefined" @click="uploadJobdata(0)"><a>上传就业素材</a></div>
                    <div class="checkFreetime" v-if="item.status=='1'">您还未提交空余时间<a @click='chooseFreetime'>选择空余时间</a></div>
                </div>
                <div class="list-progressz">
                    <div class="list_progress">
                        <progress-circle :radius="radius" :percent="item.percent"><span class="coursepercent">{{item.percent}}%</span></progress-circle>
                        课程进度
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {findMyPack, getMinusTime} from 'api/getData';
import { mapGetters} from 'vuex'
import progressCircle from './progressCircle.vue'
export default {
    data(){
        return{
            mycourseList:[],
            skin:{
                0:['skinA'],
                1:['skinD'],
                2:['skinD'],
                3:['skinC'],
                4:['skinC'],
                5:['skinD'],
                6:['skinC'],
                7:['skinA'],
            },
            percent:0,
            radius:70
        }
    },
    props: {
    courseD: Object
    },
    computed:{
        ...mapGetters(['currentUser'])
    },
    mounted()
    {
        this.getMycourseList()
    },
    methods:{
        getMycourseList(){
            if(this.courseD.type==1){
            let loading = this.getLoading()
            findMyPack(this.currentUser.cluesOrStuId.toString()).then(res=>{
                this.mycourseList=res.data.myPackList
                // console.log(this.mycourseList)
                 getMinusTime().then(result => {
                    // console.log(result)
                    if(res.code == 0){
                        for(let i=0;i<this.mycourseList.length;i++)
                        {
                            
                            this.status=this.mycourseList[i].status
                            this.endtime=this.mycourseList[i].endtime
                            
                            if(this.mycourseList[i].inPeriods>0 && this.mycourseList[i].periods>0){
                                this.inPeriods=this.mycourseList[i].inPeriods
                                this.periods=this.mycourseList[i].periods
                                var num=this.inPeriods/this.periods
                            
                            }else{
                                var num=0;
                            }
                            
                            if(this.status==6)
                            {
                                if(this.endtime<result.data.currentTime)
                                {
                                    this.percent=1
                                }else{
                                    if(num>1)
                                    {
                                        this.percent=1
                                    }else{
                                        
                                        this.percent=(num).toFixed(3)
                                        
                                    }
                                }
                                
                                // console.log(this.percent)
                              
                            }else if(this.status==7)
                            {
                                this.percent=1
                            }else {
                                if(num>1)
                                {
                                    this.percent=1
                                }else{
                                    this.percent=+(num).toFixed(3)
                                }
                            }
                            let percentd=parseFloat((this.percent * 100).toFixed(10))
                            this.percent=percentd
                            // console.log(this.percent)
                            this.$set(this.mycourseList[i],"percent", this.percent)
                        }
                    }
                })
               
            })
            loading.close()
        }
        },
        checkZhengshu(formalclassid){
            this.$router.push({
                path: '/checkendCertificate',
                query: {
                    formalclassid:formalclassid,
                    cluesOrStuId: this.currentUser.cluesOrStuId.toString()
                }
            })
        },
        uploadJobdata(flag){
            this.$router.push({
                path: '/uploadJobmes',
                query:{
                    flag:flag
                }
            })
        },
        chooseFreetime(){
            this.$router.push({
                path:'/classPlan/selectDate'
            })
        }
    },
     filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + MM + '-' + d ;
      },
      formatTimechange(timeData) {
      let data, hh, mm, ss,
        that = this,
        addZero = n => n < 10 ? '0' + n : '' + n;

      data = new Date(timeData * 1)
      hh = addZero(data.getHours())
      mm = addZero(data.getMinutes())
      ss = addZero(data.getSeconds())
      return `${hh}:${mm}:${ss}`
    }
    },
   components:{
       progressCircle
   }
}
</script>
<style lang="stylus" scoped>
.orders-null {
  // padding: 15px 0;
  // margin-top: 30px;
  text-align: center;
  background:#fff;
  height 380px;
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.08);
  border-radius:4px;
  span {
    margin-top 122px;
    display: inline-block;
    vertical-align: middle;
  }
  img{
    width:92px;
    height:160px;
  }
  .orders-null-text{
    color: #a4a4a4;
    padding-left: 30px;
  }
}
.mycourseList{
    max-width: 1200px;
    margin-top: -30px;
    .courselist{
        width:1200px;
        // height:212px;
        background:rgba(255,255,255,1);
        box-shadow:0px 1px 2px 0px rgba(0,0,0,0.08);
        border-radius:4px;
        margin-bottom:30px;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        .list_nr{
            max-width:960px;
            flex:1;
            .coursetitle{
                display flex;
                width: 100%;
                flex-direction:row;
                margin: 39px 0 29px 20px;
                .coursecaption{
                    font-size:26px;
                    font-family:'MicrosoftYaHei-Bold';
                    font-weight:bold;
                    color:rgba(32,32,32,1);
                    margin-right:10px;
                }
                .coursestate{
                    width:70px;
                    height:26px;
                    text-align:center;
                    line-height 26px;
                    font-size:14px;
                    font-weight:bold;
                    // 黑色
                    .skinA
                    {
                        background:#F2F2F2;
                        color:#202020;
                        border-radius:4px;
                    }
                    // 红色
                    .skinB
                    {
                        background:#FFEFEF;
                        color:#FF0000;
                        border-radius:4px;
                    }
                    // 绿色
                    .skinC
                    {
                        background:#E9FFF1;
                        color:#30C060;
                        border-radius:4px;
                    }
                    // 蓝色
                    .skinD
                    {
                        background:#EDE7FF;
                        color:#521DEB;
                        border-radius:4px;
                    }
                }
            }
            .souscourse
            {
                font-size:14px;
                font-family:'MicrosoftYaHei';
                color:rgba(32,32,32,1);
                height:44px;
                line-height: 44px;
                margin-left:20px
                span{
                    color:rgba(164,164,164,1);
                }
            }
            .myClassName
            {
                font-size:14px;
                font-family:'MicrosoftYaHei';
                color:rgba(32,32,32,1);
                height:44px;
                line-height: 44px;
                margin-left:20px
                span{
                    color:rgba(164,164,164,1);
                }  
            }
            .courseinfo
            {
                display:flex;
                flex-direction:row;
                width:100%;
                font-size:14px;
                font-family:'MicrosoftYaHei';
                color:rgba(32,32,32,1);
                height:44px;
                line-height:44px;
                margin-left:20px
                span{
                    color:rgba(164,164,164,1);
                }
                .regtime{

                }
                .lector{
                    margin-left:30px     
                }
                .teacher{
                    margin-left:30px
                }
            }
            .checkCc{
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(255,98,82,1);
                height:44px;
                line-height:44px;
                margin-left:20px;
                padding-bottom: 30px;
                a{
                    cursor:pointer
                }
            }
            .checkFreetime{
                font-size:14px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(164,164,164,1);
                height:44px;
                line-height:44px;
                margin-left:20px;
                padding-bottom: 30px;
                a{
                    color:rgba(255,98,82,1);
                    margin-left:19px;
                    cursor:pointer
                }
            }   
        }
        .list_progressz{
            width:240px
        }
        .list_progress{
            text-align: center;
            font-size:14px;
            font-family:'MicrosoftYaHei';
            color:rgba(164,164,164,1);
            margin: 59px 85px 59px 85px;
            width: 70px;
            .coursepercent{
                position: absolute;
                z-index: 99;
                top: 28px;
                left: 10px;
                width: 50px;
                font-weight: 700;
                color: #202020;
                text-align: center;
            }
        }
    } 
}
.rightjl{
    margin-right:5px;
    color:#202020 !important
}
</style>


